<script setup lang="ts">
import type api from '@/api'
import { useUserStore } from '@/store'

const props = defineProps<{
  classInfos: (Awaited<ReturnType<typeof api.classes.getClassInfoByClassId>>['data']
    & Awaited<ReturnType<typeof api.classes.getClassesByCurrentUser>>['data'][number])[]
  classIndex: number
  onClassChange: (classIndex: number) => void
}>()

const user = useUserStore()

const currentClass = computed(() => props.classInfos[props.classIndex] as (typeof props.classInfos[number] | undefined))
const isCreator = computed(() => user?.userInfo?.id !== void 0 && user?.userInfo?.id !== null && currentClass.value?.creatorId !== void 0 && currentClass.value?.creatorId !== null && user?.userInfo?.id === `${currentClass.value?.creatorId}`)
const pickerValue = ref(currentClass.value?.className)

watch(pickerValue, (newVal, oldVal) => {
  if (newVal !== void 0 && newVal !== oldVal) {
    if (newVal === '加入班级') {
      uni.navigateTo({
        url: '/pages-sub/admin/class/join-class',
      })
    }
    else if (newVal === '创建班级') {
      uni.navigateTo({
        url: '/pages-sub/admin/class/create-class',
      })
    }
    else {
      props.onClassChange(
        props.classInfos.findIndex(({ className }) => className === newVal),
      )
    }
  }
})

watch(currentClass, (newVal) => {
  if (newVal !== void 0 && pickerValue.value !== void 0)
    pickerValue.value = currentClass.value.className
})

function onManageClick() {
  return void uni.navigateTo({
    url: `/pages-sub/admin/class/manage-class?classId=${currentClass.value?.id}`,
  })
}

function onInviteClick() {
  const code = currentClass.value?.classCode
  if (!code)
    return

  uni.setClipboardData({
    data: code,
    success: () => {
      uni.showToast({
        title: '班级口令已复制',
        icon: 'success',
      })
    },
    fail: () => {
      uni.showToast({
        title: '复制失败',
        icon: 'none',
      })
    },
  })
}
</script>

<template>
  <view class="panel-section">
    <view class="header">
      <text class="class-name">
        {{ currentClass?.className }}
      </text>
      <text class="member-count">
        {{ `(${currentClass?.memberCount}人)` }}
      </text>
      <view class="action-buttons">
        <wd-picker
          v-model="pickerValue"
          :columns="[...(props.classInfos?.map(({ className }) => className) ?? []), `加入班级`, `创建班级`]"
          use-default-slot
        >
          <text class="switch-btn">
            ⇌ 切换
          </text>
        </wd-picker>
        <text
          v-show="isCreator" class="manage-btn"
          @click="onManageClick()"
        >
          班级管理 >
        </text>
      </view>
    </view>

    <view class="class-code-section">
      <text class="label">
        班级口令:
      </text>
      <text class="code">
        {{ currentClass?.classCode }}&nbsp;&nbsp;
      </text>
      <text class="invite-member" @click="onInviteClick()">
        +邀请成员
      </text>
    </view>
  </view>
</template>

<style scoped lang="scss">
@import '@/styles/variables.scss';

@mixin section($margin-bottom: $section-margin) {
  padding: $container-padding;
  border-radius: $border-radius-xl;
  background-color: $white;
  box-shadow: $shadow-lg;
  margin-bottom: $margin-bottom;
}

.panel-section {
  @include section();

  .header {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    height: 40px;
    line-height: 40px;

    .class-name {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }

    .member-count {
      font-size: 28rpx;
      color: #999;
      margin-left: 10rpx;
    }

    .action-buttons {
      display: flex;
      align-items: center;
      margin-left: auto;
      justify-content: space-between;
      width: 50%;

      .switch-btn {
        font-size: 28rpx;
        color: #007aff; /* 蓝色 */
        margin-right: 30rpx;
      }

      .manage-btn {
        font-size: 28rpx;
        color: #999;
      }
    }
  }

  .class-code-section {
    height: 30px;
    line-height: 30px;
    display: flex;
    align-items: center;

    .label {
      font-size: 28rpx;
      color: #999;
    }

    .code {
      font-size: 28rpx;
      color: #333;
      margin-left: 10rpx;
      margin-right: 30rpx;
    }

    .invite-member {
      font-size: 28rpx;
      color: #007aff; /* 蓝色 */
    }
  }
}
</style>
